<script src="<?php echo RESOURCE_URL?>/js/jquery.js"></script>
<a href="javascript:void(0)" onclick="mates_add()">添加同事</a>
<form>
    <table border="0" cellspacing="1" cellpadding="5" bgcolor="#7fffd4">
        <thead><tr bgcolor="#f0ffff"><th><input id="del_more" type="button" value="删除多个" ></th><th>编号</th><th>姓名</th><th>年龄</th><th>工作</th><th>部门</th><th>操作</th></tr></thead>
        <tbody>
        <?php foreach($list as $v){?>
            <tr bgcolor="#f0ffff">
                <td><input type="checkbox" name="del[]" value="<?php echo $v['mates_id']?>" /></td>
                <td><?php echo $v['mates_id']?></td>
                <td><?php echo $v['mates_name']?></td>
                <td><?php echo $v['mates_age']?></td>
                <td><?php echo $v['mates_job']?></td>
                <td><?php echo $v['mates_part']?></td>
                <td><a href="javascript:void(0)" onclick="mates_edit(<?php echo $v['mates_id']?>)">编辑</a></td>
            </tr>
        <?php }?>
        </tbody>
    </table>
</form>
<button id="btn">js函数参数测试</button>
<script>
    $('#btn').click(function(){
        function arg(part){

            var name = arguments[1]?arguments[1]:'张迎光';

            var age = arguments[2]?arguments[2]:25;
            if(typeof arguments[1]=='number'){
                age = arguments[1];
                name = '张迎光';
            }
            var job = arguments[3]?arguments[3]:'php';
            alert(part+'--'+name+'--'+age+'--'+job);
        }
        arg('技术部','xxx',28);
    });
</script>
<!--<section id="mate_add" style="display:none">
    <form action="index.php?act=mates&op=add" method="post">
        <table>
            <tr><td>
                    <input placeholder="姓名" type="text" name="name" required>
                </td></tr>
            <tr><td><input type="text" name="age" placeholder="年龄" required></td></tr>
            <tr><td><input type="text" name="job" placeholder="工作" required></td></tr>
            <tr><td><input type="text" name="part" placeholder="部门" required></td></tr>

            <tr><td><input type="submit" value="添加"></td></tr>
        </table>
    </form>
</section>
<section id="mates_edit" style="display:none">
    <form action="index.php?act=mates&op=edit" method="post">
        <table>
            <tr><td>
                    <input type="hidden" name="mates_id" >
                    <input placeholder="姓名" type="text" name="name" required>
                </td></tr>
            <tr><td><input type="text" name="age" placeholder="年龄" required></td></tr>
            <tr><td><input type="text" name="job" placeholder="工作" required></td></tr>
            <tr><td><input type="text" name="part" placeholder="部门" required></td></tr>

            <tr><td><input type="submit" value="提交"></td></tr>
        </table>
    </form>
</section>-->
<script>
    /*返回添加/编辑的html代码，并绝对定位在文档中间
    * (op,[mates_obj]):必须op=add/edit,可选mates_obj（同事对象）在op=edit时传入
    * */
    function add_or_edit_html(op){
        if(op=='edit'){var mates_obj = arguments[1];}
        var str = '<div id="add_edit_box">';
        str+='<p id="del_box"><b>&xotime;</b></p>';
        str+='<form action="index.php?act=mates&op='+op+'" method="post">';
        str+='<table>';
        str+='<tr><td>';
        if(op=='edit'){
            str+='<input type="hidden" name="mates_id" value="'+mates_obj.mates_id+'">';
        }

        str+='姓名:<input placeholder="姓名" type="text" name="name"';
        if(op=='edit'){str+='value="'+mates_obj.mates_name+'"';}
        str+=' required=></td></tr>';
        str+='<tr><td>年龄:<input type="text" name="age" placeholder="年龄" ';
        if(op=='edit'){str+='value="'+mates_obj.mates_age+'"';}
        str+='required></td></tr><tr><td>工作:<input type="text" name="job" ';
        if(op=='edit'){str+='value="'+mates_obj.mates_job+'"';}
        str+='placeholder="工作" required></td></tr><tr><td>部门:<input type="text" name="part"  ';
        if(op=='edit'){str+='value="'+mates_obj.mates_part+'"';}
        str+='placeholder="部门" required></td></tr> <tr><td align="center"><input type="submit" value="提交"></td></tr>';
        str+='</table>';
        str+='</form>';
        str+='</div>';
        str+='<style>*{background-color:#C6C4C5;}#add_edit_box *{background-color: lightcyan;color:#39f}#add_edit_box{background-color: lightcyan;padding:5px;border:1px solid;position:absolute;left:50%;top:30%;}#del_box{text-align:right;margin:0;}#del_box b{cursor:pointer;}</style>';

        return str;

    }

    var bg_orig={};

  function mates_add(){
      bg_orig.body_bg = $('body').css('background-color');

      bg_orig.table_bg = $('table').css('backgroundColor');

      bg_orig.tr_bg = $('tr').css('backgroundColor');
     $('body').append(add_or_edit_html('add'));


    }
    $("#del_box").live('click',function(){$("#add_edit_box").remove();$('body').css('backgroundColor',bg_orig.body_bg);$('table').attr('bgcolor',bg_orig.table_bg);$('tr').css('backgroundColor',bg_orig.tr_bg);});

    function mates_edit(mates_id){
        var mates_edit = $('#mates_edit');

            $.getJSON('index.php?act=mates&op=ajax_get_mate',{mates_id:mates_id},function(res){
                if(res.state===true){
                    $('body').append(add_or_edit_html('edit',res));
                }else {
                    alert('获取同事信息出错');
                }

            });
    }
    $('#del_more').click(function(){
        if(!confirm('确定删除吗？')){
            return false;
        }
        var data_del_more = $('form:first').serialize();
        $.ajax({
            type:'get',
            url:"index.php?act=mates&op=del_more",
            dataType:'json',
            data:data_del_more,
            success:function(res){
                if(res.state==true){
                    alert(res.msg);
                    window.location.href = res.ref;
                }else{
                    alert(res.msg);
                }
            }

        });
    })

</script>